<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link rel="stylesheet" href="/component/layui/css/layui.css">
    <style>
        .header {
            background: #5fb878;
            border-radius: 10px 10px 0px 0px;

        }

        form {
            margin: 10px 15px 15px;
        }

        .header h1 {
            color: #FFFFFF;
        }

        .huoqu {
            background: #fff;
            color: #0C0C0C;
            border: 1px solid #E6E6E6;
        }

        .huoqu:hover {
            color: #0C0C0C;
        }

        .zhuce {
            width: 100%;
            background: #5fb878;
            color: #fff;
            font-size: 18px;
            border-radius: 5px;
        }

        .zhuce:hover {
            opacity: 1;
        }

        .layui-form-checked[lay-skin=primary] i {
            border-color: #5fb878 !important;
        }

        .layui-form-checked i, .layui-form-checked:hover i {
            background-color: #5fb878 !important;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <form action="" class="layui-form layui-form-pane layui-col-xs11">

        <div class="layui-form-item layui-row header">
            <h1 class="layui-col-xs6 layui-col-xs-offset3">注册账号</h1>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <i class="layui-icon layui-icon-cellphone"></i></label>
            <div class="layui-input-block">
                <input type="tel" name="userNum" lay-verify="required" class="layui-input"
                       placeholder="请输入工号"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <i class="layui-icon layui-icon-username"></i></label>
            <div class="layui-input-block">
                <input type="tel" name="userName" class="layui-input"
                       placeholder="请输入用户名称"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i
                    class="layui-icon layui-icon-cellphone"></i></label>
            <div class="layui-input-block">
                <input type="text" name="phone" class="layui-input"
                       placeholder="请输入联系方式"/>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label"><i
                    class="layui-icon layui-icon-password"></i></label>
            <div class="layui-input-block">
                <input type="password" id="pwd1" name="userPwd" lay-verify="required" class="layui-input"
                       placeholder="请输入密码"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i
                    class="layui-icon layui-icon-password"></i></label>
            <div class="layui-input-block">
                <input type="password" id="pwd2" name="password" lay-verify="password_twice" class="layui-input"
                       placeholder="请再次输入密码"/>
            </div>
        </div>

        <div class="layui-form-item">
            <input type="checkbox" id="key_service" lay-verify="check" name=""
                   title="我已阅读并同意 《用户协议》《隐私政策》"
                   lay-skin="primary">
        </div>
        <div class="layui-form-item layui-row ">
            <button class="layui-btn zhuce" lay-submit lay-filter="reg">注册</button>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-xs4 layui-col-xs-offset4">
                <span>已有账号？</span><a href="#" class="newlogin">直接登录</a>
            </div>
        </div>
    </form>
</div>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script src="/component/common/common.js"></script>
<script src="/component/common/jquery-2.1.4.min.js"></script>
<script>
    layui.use(['form', 'layer', 'popup'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let popup = layui.popup;
        form.render();
        form.verify({
            password_twice: function (value) {
                var newpwd = $("#pwd1").val()
                if (value.length === 0) {
                    return '密码不得为空'
                }
                if (newpwd !== value) {
                    return '密码必须保持一致哟'
                }
            },
            check: function () {
                var checked = $("#key_service").get(0)
                if (checked.checked === false) {
                    // layer.msg("请勾选协议",{icon:5,time:2000,anim: 6})
                    return '请勾选协议'
                }
            }
        });
        //注册
        form.on('submit(reg)', function (data) {
            console.log(data.field)
            defaultPost("/sysuser/regs", data.field, function (res) {
                if (res.flag) {
                    popup.success("注册成功", function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name))
                    })
                } else {
                    console.log(res.msg)
                    layer.msg(res.msg,{icon:5,time:20000,anim: 6})
                }
            }, function (err) {
                popup.failure(err.msg)
            })
        })

        $(".newlogin").on('click', function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name))
        })
    })
</script>
</body>
</html>
